<template>
  <div class="warnBox" style="position: relative;">
    <div  v-if="show_gif" class="warn_gif">
      <img src="../../../assets/images/warn.gif">
    </div>
    <IEcharts :option="jqTimelist" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  import pieEchartsOption from '@/utils/echarts/pie.js'
  export default {
    components: {
      IEcharts
    },
    data () {
      return {
        show_gif:false,
        jqTimelist: {
          color: [
            '#FF7723',
            '#0263FF',
            '#23C4D9',
            '#13A55A',
            '#FFDF3C',
            '#FF6A8D'
          ],
          title: {
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          graphic: [],
          series: []
        },
        xlpeoplenum: [] // 学历展示数据用的    条形统计图
      }
    },
    created () {
      this.getjqsjList()
    },
    methods: {
      getjqsjList () {
        this.$axios.post(this.$api.homeCharts.deptDayWarningCharts).then(res => {
          if (res) {
            if(res.length===0){
              this.show_gif=true
            }else{
               this.show_gif=false
            }
            this.xlpeoplenum = res.map(item => {
              return { value: item.value, name: item.name }
            })
            this.jqTimelist.color = res.map(item => {
              return item.color
            })
          }
          this.apijqsjData()
        })
      },
      apijqsjData () {
        this.jqTimelist.series = [
          {
            data: this.xlpeoplenum,
            name: '今日待处理',
            selectedMode: 'single',
            radius: [60, 120],
            roseType: ''
          }
        ]
        this.jqTimelist.title = {
          text: '今日预警'
        }
        this.jqTimelist.graphic = [
          {
            style: {
              text: ''
            }
          },
          {
            style: {
              text: ''
            }
          }
        ]
        this.jqTimelist = pieEchartsOption(this.jqTimelist)
      }
    }

  }
</script>

<style lang='scss' scoped>
  .warnBox{
    height: 400px;
    .warn_gif {
      position: absolute;
      top: 80px;
      left: 20px;
      width: 100%;
      // text-align: center;
      img {
        display: block;
        width: 50%;
        margin: 0 25%;
      }
    }
  }
</style>
